<template>
	<view class="index">
		<!-- 		<view class="bg_image">
			<image src="http://wx-cdn.jiujiuyunhui.com/202011091623282f83a8213.png"></image>
		</view> -->
		<view class="tab-list">
			<view @click="handleTab(1)" :class="formType == 1?'active':''">个人</view>
			<view @click="handleTab(2)" :class="formType == 2?'active':''">商户</view>
		</view>

		<view class="certification">
			<form @submit="formSubmit" @reset="formReset">
				<view class="certification_head">
					<view class="certification_head_body">
						<!-- 						<view class="certification_head_body_item">
							<view class="icon iconfont icon-qiye"></view>
							<input type="text" name="user_name" v-model="form.user_name" placeholder='请输入店铺名称' />
						</view> -->
						<view class="certification_head_body_item">
							<view class="icon iconfont icon-ziyuan1"></view>
							<input type="text" name="user_name" v-model="form.user_name" placeholder='请输入真实姓名'
								@input="handleChineseInput" />
						</view>
						<view class="certification_head_body_item">
							<view class="icon iconfont icon-phone"></view>
							<input type="number" name="mobile" v-model="form.mobile" placeholder='请输入手机号码'
								style='width: 100%;' @input="phoneRegular" />
							<button type="default" v-if="sms_open == 1" :disabled="is_send"
								@click="getCode(form.mobile)"
								style="color: #00C8BE; border-color: #00C8BE;">{{send_btn_txt}}</button>
						</view>
						<!-- 						<view class="certification_head_body_item">
							<view class="icon iconfont icon-mima"></view>
							<input type="text" name="password" v-model="form.password" password="true" placeholder='请输入登录密码' />
						</view> -->
						<view class="certification_head_body_item" v-if="sms_open == 1">
							<view class="icon iconfont icon-yanzhengma"></view>
							<input type="text" name="code" v-model="form.code" placeholder='请输入验证码' />
						</view>
						<!-- 						<picker class="" value="" @change="changeSelect($event)"
							:range="classify_data_name">
							<view class="certification_head_body_item d-b-c">
								<view class="make-item input-box flex-1" v-if="classify_data_name_active">{{classify_data_name_active}}</view>
								<view class="make-item input-box flex-1" style="color: #777777;" v-else>请选择您店铺的主营项目</view>
								<view class="icon iconfont icon-jiantou" style="font-size: 24rpx;"></view>
							</view>
						</picker> -->
						<view class="certification_head_body_item">
							<view class="icon iconfont icon-ziyuan1"></view>
							<input type="text" name="id_num" v-model="form.id_num" placeholder='请输入身份证号' @input="handleIdCardInput"
								style='width: 100%;' />
						</view>

						<view class="certification_head_body_item" v-if="formType == 2">
							<view class="icon iconfont icon-ziyuan1"></view>
							<input type="text" name="store_name" v-model="form.store_name" placeholder='请输入企业名称' />
						</view>
						<view class="certification_head_body_item" v-if="formType == 2">
							<view class="icon iconfont icon-ziyuan1"></view>
							<input type="text" name="business_no" v-model="form.business_no" placeholder='请输入工商执照注册号' />
						</view>
					</view>
				</view>
				<!-- 				<view class="certification_body">
					<view class="login_index_updata_name">
						<text style="color:#00C8BE;">*</text>
						<text style="font-size: 32rpx;font-weight: 500;color: #000000;">请上传营业执照</text>
					</view>
					<view class="login_index_updata_updata">
						<view class="login_index_updata_updata_item2" @click="openUpload('license')">
							<view class="login_index_updata_updata_item_body">
								<view v-if="business_id_path!=''" class="img">
									<image :src="business_id_path"></image>
								</view>
								<view v-if="business_id_path==''">点击上传营业执照</view>
								<input style="display:none" name="business_id" v-model="form.business_id" />
							</view>
						</view>
					</view>
				</view> -->
				<view class="certification_body">
					<view class="login_index_updata_name">
						<text style="color:#00C8BE;">*</text>
						<text
							style="font-size: 32rpx;font-weight: 500;color: #000000;">{{formType == 1?'请上传身份证照片':'请上传法人身份证照片'}}</text>
					</view>
					<view class="login_index_updata_updata">
						<view class="login_index_updata_updata_item2" @click="openUpload('license',1)">
							<view class="login_index_updata_updata_item_body">
								<view v-if="form.card_z!=''" class="img">
									<image :src="form.card_z"></image>
								</view>
								<view v-if="form.card_z==''">点击上传人脸面</view>
								<input style="display:none" name="card_z" v-model="form.card_z" />
							</view>
						</view>
					</view>
					<view class="login_index_updata_updata">
						<view class="login_index_updata_updata_item2" @click="openUpload('license',2)">
							<view class="login_index_updata_updata_item_body">
								<view v-if="form.card_f!=''" class="img">
									<image :src="form.card_f"></image>
								</view>
								<view v-if="form.card_f==''">点击上传国徽面</view>
								<input style="display:none" name="card_f" v-model="form.card_f" />
							</view>
						</view>
					</view>
				</view>
				<view class="certification_body">
					<view class="login_index_updata_name">
						<text style="color:#00C8BE;">*</text>
						<text style="font-size: 32rpx;font-weight: 500;color: #000000;">请上传工商营业执照</text>
					</view>
					<view class="login_index_updata_updata">
						<view class="login_index_updata_updata_item2" @click="openUpload('license',3)">
							<view class="login_index_updata_updata_item_body">
								<view v-if="form.gs_img!=''" class="img">
									<image :src="form.gs_img"></image>
								</view>
								<view v-if="form.gs_img==''">点击上传工商营业执照</view>
								<input style="display:none" name="business_id" v-model="form.business_id" />
							</view>
						</view>
					</view>
				</view>
				<view class="certification_body">
					<view class="login_index_updata_name">
						<text style="color:#00C8BE;">*</text>
						<text style="font-size: 32rpx;font-weight: 500;color: #000000;">请上传门头照</text>
					</view>
					<view class="login_index_updata_updata">
						<view class="login_index_updata_updata_item2" @click="openUpload('license',4)">
							<view class="login_index_updata_updata_item_body">
								<view v-if="form.shop_pic!=''" class="img">
									<image :src="form.shop_pic"></image>
								</view>
								<view v-if="form.shop_pic==''">点击上传门头照</view>
								<input style="display:none" name="shop_pic" v-model="form.shop_pic" />
							</view>
						</view>
					</view>
				</view>
				<view class="login_index_btn">
					<button form-type="submit" type="default" style="background-color: #00C8BE;">确定</button>
				</view>
				<Upload v-if="isupload" :isupload="isupload" :type="type" @getImgs="getImgsFunc">上传图片</Upload>
			</form>
		</view>
	</view>
</template>

<script>
	import Upload from '@/components/upload/uploadOne';
	export default {
		components: {
			/*编辑组件*/
			Upload
		},
		onShow() {
			/*获取个人中心数据*/
			this.getData();
		},
		data() {
			return {
				formType: 1, // 1个人 2商户
				formImgType: 1, // 图片上传类型
				form: {
					image_frontid: 0,
					business_id: 0,
					mobile: '',
					password: '',
					business_no: '',
					store_name: "",
					user_id_card: '',
					card_z: '',
					card_z_id: '',
					card_f: '',
					card_f_id: '',
					gs_img: '',
					gs_img_id: '',
					shop_pic: ''
				},
				isupload: false,
				type: 'frontid',
				image_frontid_path: '',
				business_id_path: '',
				bg_image: '',
				classify_data_name: '', //列表名字
				classify_data_id: '', //列表id
				classify_data_name_active: '', //当前选中的列表名字
				classify_data_id_active: '', //当前选中的列表id
				/*当前秒数*/
				second: 60,
				send_btn_txt: '获取验证码',
				/*是否已发验证码*/
				is_send: false,
				sms_open: 0
			}
		},
		onShow() {
			this.get_classify();
		},
		methods: {
			handleIdCardInput(e) {
				let value = e.detail.value.toUpperCase(); // 转换为大写

				// 1. 过滤非法字符（只允许数字和X）
				value = value.replace(/[^0-9X]/g, '');

				// 2. 长度限制（18位）
				if (value.length > 18) {
					value = value.substring(0, 18);
				}

				// 3. 特殊规则：最后一位可以是X，其他必须数字
				if (value.length > 0) {
					const lastChar = value.charAt(value.length - 1);
					const body = value.substring(0, value.length - 1);

					// 最后一位如果是X，前面必须全数字
					if (lastChar === 'X') {
						value = body.replace(/[^0-9]/g, '') + 'X';
					}
					// 否则全部必须是数字
					else {
						value = (body + lastChar).replace(/[^0-9]/g, '');
					}
				}

				// 4. 更新数据
				this.form.id_num = value;

				// 5. 同步DOM值
				e.target.value = value;
			},
			handleChineseInput(e) {
				let value = e.detail.value;
				// 1. 过滤非汉字字符（包括标点、数字、字母等）
				this.form.user_name = value.replace(/[^\u4e00-\u9fa5]/g, '');
				e.target.value = value
			},
			phoneRegular(e) {
				let value = e.detail.value;
				// 1. 过滤非数字字符
				this.form.mobile = value.replace(/[^\d]/g, '');
				e.target.value = value;
			},
			// 切换表单类型
			handleTab(type) {
				this.formType = type;
				this.second = 0;
				for (let i in this.form) {
					this.form[i] = '';
				}
			},
			/*改变发送验证码按钮文本*/
			changeMsg() {
				if (this.second > 0) {
					this.send_btn_txt = this.second + '秒';
					this.second--;
					setTimeout(this.changeMsg, 1000);
				} else {
					this.send_btn_txt = '获取验证码';
					this.second = 60;
					this.is_send = false;
				}
			},
			/*获取数据*/
			getData() {
				let self = this;
				self._get('user.index/detail', {

				}, function(res) {
					self.bg_image = res.data.setting.supplier_image;
				});
			},
			//获取验证码
			getCode(mobile) {
				let self = this;
				if (!mobile) return uni.showToast({
					title: '请输入手机号',
					duration: 1000,
					icon: 'none'
				});
				self._post('supplier.apply/sendCode', {
					mobile: mobile
				}, function(res) {
					self.is_send = true;
					self.changeMsg();
				});
			},
			//获取分类
			get_classify() {
				let self = this;
				self._post('supplier.apply/category', {

				}, function(res) {
					let list_name = [];
					let list_id = [];
					//合成select列表
					for (var i = 0; i < res.data.list.length; i++) {
						list_name.push(res.data.list[i].name);
					}
					//合成上传所需id数组
					for (var i2 = 0; i2 < res.data.list.length; i2++) {
						list_id.push(res.data.list[i2].category_id);
					}
					self.classify_data_name = list_name;
					self.classify_data_id = list_id;
					self.sms_open = res.data.sms_open;
				});
			},
			//选择分类
			select() {
				let self = this;
				uni.showActionSheet({
					itemList: self.classify_data_name,
					success: function(res) {
						self.classify_data_name_active = self.classify_data_name[res.tapIndex];
						self.classify_data_id_active = self.classify_data_id[res.tapIndex];
					},
					fail: function(res) {

					}
				});
			},
			validateIdCard(idCard) {
				// 基本格式校验
				const reg = /(^\d{15}$)|(^\d{17}(\d|X|x)$)/;
				if (!reg.test(idCard)) return false;

				// 校验位验证（仅对18位身份证）
				if (idCard.length === 18) {
					const weight = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]; // 加权因子
					const validateCodes = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2']; // 校验码对应值
					let sum = 0;

					for (let i = 0; i < 17; i++) {
						sum += parseInt(idCard.charAt(i)) * weight[i];
					}

					const mod = sum % 11;
					const lastChar = idCard.charAt(17).toUpperCase();

					if (lastChar !== validateCodes[mod]) {
						return false;
					}
				}

				return true;
			},
			/*提交*/
			formSubmit: function(e) {
				let self = this;
				var formdata = e.detail.value;
				formdata.type = this.formType
				if (!formdata.user_name) {
					uni.showToast({
						title: '请输入真实姓名',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}
				if (formdata.mobile == '') {
					uni.showToast({
						title: '请输入手机号码',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}
				const mobileReg = /^1[3-9]\d{9}$/;
				if (!mobileReg.test(formdata.mobile)) {
					uni.showToast({
						title: '请输入正确的手机号码',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}
				if (formdata.code == '') {
					uni.showToast({
						title: '请填写验证码',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}
				if (formdata.id_num == '') {
					uni.showToast({
						title: '请输入身份证号',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}
				if (!self.validateIdCard(formdata.id_num)) {
					uni.showToast({
						title: '请输入正确的身份证号',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}

				if (!formdata.store_name && this.formType == 2) {
					uni.showToast({
						title: '请输入企业名称',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}

				if (!formdata.business_no && this.formType == 2) {
					uni.showToast({
						title: '请输入工商执照注册号',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}

				if (!this.form.card_z) {
					uni.showToast({
						title: '请上传身份证正面照片',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}

				if (!this.form.card_f) {
					uni.showToast({
						title: '请上传身份证国徽面照片',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}
				console.log("this.form.business_id", this.form.business_id)
				if (!this.form.business_id && this.formType == 1) {
					uni.showToast({
						title: '请上传营业执照',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}

				if (!this.form.shop_pic) {
					uni.showToast({
						title: '请上传门头照',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}

				if (this.formType == 1) {
					formdata.store_name = ''
				}



				uni.showLoading({
					title: '正在提交',
					mask: true
				})
				self._post('supplier.apply/index', formdata, function(res) {
					self.showSuccess(res.msg, function() {
						self.gotoPage('/pages/shop/application_status')
					}, null, function() {
						uni.hideLoading();
					});
				});
			},
			/*上传*/
			openUpload(e, imgType) {
				this.type = e;
				this.formImgType = imgType;
				this.isupload = true;
			},

			/*获取图片*/
			getImgsFunc(e) {
				console.log(e)
				if (e != null && e.length > 0) {
					if (this.type == 'frontid') {
						console.log(e[0].file_id);
						this.image_frontid_path = e[0].file_path;
						this.form.image_frontid = e[0].file_id;
					} else if (this.type == 'license') {
						if (this.formImgType == 1) {
							this.form.card_z = e[0].file_path;
							this.form.card_z_id = e[0].file_id;
						} else if (this.formImgType == 2) {
							this.form.card_f = e[0].file_path;
							this.form.card_f_id = e[0].file_id;
						} else if (this.formImgType == 3) {
							this.form.gs_img = e[0].file_path;
							this.form.business_id = e[0].file_id;
						} else if (this.formImgType == 4) {
							this.form.shop_pic = e[0].file_path;
						}
					}
				}
				this.isupload = false;
			},
			/* 下拉框 */
			changeSelect(e) {
				this.classify_data_id_active = this.classify_data_id[e.detail.value];
				this.classify_data_name_active = this.classify_data_name[e.detail.value];
			},
		}
	}
</script>



<style>
	page {
		background: rgba(0, 200, 190, 0.1);
	}

	.bg_image image {
		width: 100%;
		height: 1200rpx;
	}

	.iconfont {
		font-size: 48rpx;
	}

	.index {
		width: 750rpx;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.certification {
		width: 675rpx;
		margin: 0 auto;
		border-radius: 30rpx;
		padding: 30rpx;
		box-sizing: border-box;
		background-color: white;
		/* 		position: absolute;
		top: 260rpx;
		left: 37.5rpx;
		margin-bottom: 50rpx; */
	}

	.certification_head {
		width: 100%;
	}

	.certification_head_body {
		width: 100%;
	}

	.certification_head_body_item {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		font-size: 32rpx !important;
	}

	.certification_head_body_item input {
		width: 100%;
	}

	.certification_head_body_item view {
		margin-right: 10rpx;
	}

	.certification_head_body_item button {
		width: 172rpx;
		height: 56rpx;
		line-height: 56rpx;
		border: 1rpx #E2231A solid;
		border-radius: 40rpx;
		font-size: 26rpx;
		color: #E2231A;
		padding: 0 20rpx;
	}

	.certification_body {}

	.login_index_updata_name {
		margin-top: 28rpx;
		margin-left: 48rpx;
	}

	.login_index_updata_updata {
		width: 90%;
		height: 360rpx;
		margin: 0 auto;
		margin-top: 35rpx;
	}

	.login_index_updata_updata_item2 {
		width: 100%;
		height: 360rpx;
		border: 1rpx #9a9a9a dotted;
		border-radius: 15rpx;
		text-align: center;

	}

	.login_index_updata_updata_item_body {
		width: 150rpx;
		height: 360rpx;
		text-align: center;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.img image {
		width: 554rpx;
		height: 360rpx;
		position: relative;
	}

	.login_index_btn {
		position: relative;
		top: 30rpx;
		margin-bottom: 30rpx;
	}

	.login_index_btn button {
		width: 90%;
		height: 80rpx;
		background-color: #F36A24;
		border-radius: 50rpx;
		line-height: 80rpx;
		margin: 0 auto;
		color: white;
		font-size: 30rpx;
	}

	.certification_rule {
		position: relative;
		left: 500rpx;
		top: -10rpx;
	}

	.certification_rule text {
		color: #8a8a8a;
	}

	.certification_rule image {
		width: 24rpx;
		height: 24rpx;
		display: inline-block;
	}

	.classify_text {
		color: #808080;
		margin-left: 40rpx;
	}

	.select input {
		padding-left: 60rpx;
		color: #808080;
	}

	.make-item {
		padding-left: 60rpx;
	}
</style>


<style scoped lang="less">
	.tab-list {
		width: 100%;
		height: 50rpx;
		display: flex;
		align-items: center;
		background: #fff;
		border-radius: 20rpx;
		margin: 50rpx auto;
		font-size: 28rpx;
		font-weight: bold;

		view {
			width: 100%;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			color: #000;
			border-radius: 20rpx;
		}

		.active {
			background: #00C8BE;
			color: #fff;
		}
	}
</style>